/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { Component } from "react";
import { connect } from "dva";
import { Form, Alert, InputNumber, Button, message } from "antd";
import ServiceTable from "./components/ServiceTable";
import styles from "./style.less";
const FormItem = Form.Item;

@connect(({ loading, dispat }) => ({
  dispat,
  getFeeApply: loading.effects["dispat/feeApply"],
}))
@Form.create()
class ServiceSettings extends Component {
  constructor(props) {
    super(props);
    this.state = {
      money: 0.0,
      examineType: true,
      new_service_money: 0,
      modify: true,
      flage: true,
    };
  }

  componentDidMount() {
    this.getDispatchFee();
  }

  getDispatchFee = () => {
    const { dispatch } = this.props;
    dispatch({
      type: "dispat/getDispatchFee",
      payload: {},
      then: res => {
        if (res.code != 0) {
          this.setState({
            flage: false,
          });
        }
      },
    });
  };

  rechargePay = () => {
    const {
      form: { validateFields },
      dispatch,
      dispat: { serviceSettings },
    } = this.props;
    const { service_fee } = serviceSettings;
    validateFields(["money"], (err, values) => {
      if (err) {
        return;
      }
      const { money } = values;
      if (service_fee != money) {
        dispatch({
          type: "dispat/feeApply",
          payload: {
            fee: money,
          },
        }).then(res => {
          if (res.code == 0) {
            this.setState({
              examineType: false,
              new_service_money: money,
              modify: true,
            });
            this.getDispatchFee();
          }
        });
      } else {
        message.error("您所提交的价格并未修改，请修改后重新提交");
      }
    });
  };

  // 修改服务费
  modifyClick = () => {
    this.setState({
      modify: false,
    });
  };

  // 取消修改服务费
  closeModifyClick = () => {
    this.setState({
      modify: true,
    });
  };

  render() {
    const { examineType, new_service_money, modify, flage } = this.state;
    const {
      form,
      dispat: { serviceSettings },
      getFeeApply = false,
    } = this.props;
    const { getFieldDecorator } = form;
    const { service_fee, apply_fee, check_status, valid_tip, first_apply } = serviceSettings;
    //字段说明
    // check_status == 0：未审核  1：已审核 2：已拒绝
    // service_fee 首次申请 = 0   生效中 ！= 0
    // apply_fee 首次进页面 = 0  上次申请 ！= 0
    // original_fee 首次 = 0
    // first_apply  是否为第一次申请
    // examineType  true：首次进页面
    // examineType ? (service_fee == 0 ? (check_status == 1 ? service_fee : (check_status == 2 ? service_fee : apply_fee)) : (check_status == 0 ? apply_fee : service_fee)) : new_service_money
    const service_money = examineType
      ? service_fee == 0
        ? check_status == 1
          ? service_fee
          : check_status == 2
            ? service_fee
            : apply_fee
        : check_status == 0
          ? apply_fee
          : service_fee
      : new_service_money;
    return (
      <div style={{ paddingTop: 10 }} className={styles.account}>
        <div>
          <Alert
            message={
              <span>
                1.如设置的入库服务费价格为X元，则加盟商驿站每入库一票快件，从加盟商驿站快宝驿站APP可消费账户扣除X元至快宝智慧快递管理平台资金账户内。
                <br />
                2.设置或修改价格后，需等待快宝审核，快宝审核通过后立即生效。
              </span>
            }
            type="warning"
          />
        </div>
        <div style={{ paddingTop: 20 }}>
          <div className={styles.recharge}>
            <div>
              <span className="c-gray">加盟商驿站入库服务费：</span>
              {modify && !first_apply && flage ? (
                <span className="c-gray">
                  <span>{service_money}</span>
                </span>
              ) : (
                <FormItem>
                  {getFieldDecorator("money", {
                    initialValue: modify ? "" : service_money,
                    rules: [
                      { required: true, message: "请输入价格" },
                      {
                        validator: (rule, value, callback) => {
                          if (value > 10) {
                            callback("金额最高为10元");
                            return;
                          } else if (value < 0) {
                            callback("金额最少为0元");
                            return;
                          }
                          callback();
                        },
                        // message: "金额最高为10元"
                      },
                    ],
                  })(
                    <InputNumber
                      precision={2}
                      style={{ width: 164 }}
                      formatter={value =>
                        value ? `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : ""
                      }
                      parser={value => value.replace(/￥\s?|(,*)/g, "")}
                      placeholder="请输入价格"
                    />
                  )}
                </FormItem>
              )}

              <span>
                <span style={{ padding: "0 10px" }}>元</span>
                {check_status != "0" && modify && !first_apply ? (
                  <span style={{ color: "#f00" }}>{valid_tip ? `（${valid_tip}）` : ""}</span>
                ) : (
                  ""
                )}
              </span>
            </div>
          </div>
          <div>
            <FormItem>
              <p style={{ color: "#f00" }}>
                {check_status == "2" ? `您上次提交的入库服务费${apply_fee}元未通过快宝审核` : " "}
              </p>
            </FormItem>
          </div>
          <div>
            {(first_apply && service_money == "0") || !flage ? (
              <Button
                type="primary"
                onClick={this.rechargePay}
                loading={getFeeApply}
                style={{ marginRight: "15px" }}
              >
                提交快宝审核
              </Button>
            ) : (
              <div>
                {check_status != "0" ? (
                  <div>
                    {modify ? (
                      <Button
                        type="primary"
                        style={{ marginRight: "15px" }}
                        onClick={this.modifyClick}
                      >
                        修改服务费
                      </Button>
                    ) : (
                      <div>
                        <Button
                          type="primary"
                          onClick={this.rechargePay}
                          loading={getFeeApply}
                          style={{ marginRight: "15px" }}
                        >
                          提交快宝审核
                        </Button>
                        <Button
                          type="primary"
                          style={{ marginRight: "15px" }}
                          onClick={this.closeModifyClick}
                        >
                          取消修改
                        </Button>
                      </div>
                    )}
                  </div>
                ) : (
                  <Button type="primary" disabled style={{ marginRight: "15px" }}>
                    快宝审核中
                  </Button>
                )}
              </div>
            )}
            <ServiceTable />
          </div>
        </div>
      </div>
    );
  }
}

export default ServiceSettings;
